آموزش راهنمای کامل CSS Flexbox با یک پروژه کامل [به روز رسانی برای سال 2021] [ویدئو]

The Complete CSS Flexbox Guide with a Complete Project [Updated for 2021] [Video]

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: آیا می خواهید طرح بندی های پیچیده وب سایت را به راحتی و به سرعت تنها با خطوط ساده کد ایجاد کنید؟ این دوره به شما کمک می کند تا با استفاده از جادوی flexbox، طرح بندی های پیچیده وب سایت را به راحتی ایجاد کنید. شما این دوره را با ایجاد اولین کانتینر فلکس باکس خود برای درک نحوه عملکرد فلکس باکس آغاز خواهید کرد. در مرحله بعد، نحوه کنترل تراز عناصر با استفاده از CSS flexbox را یاد خواهید گرفت. با حرکت، تکنیک هایی را برای کنترل اندازه عناصر و ساخت منوهای اولیه و پیشرفته با استفاده از flexbox درک خواهید کرد. در پایان، یاد خواهید گرفت که یک وب سایت با طرح‌بندی‌های واکنش‌گرای پیشرفته، مانند جام مقدس، چیدمان ستون‌های مساوی و سنگ‌تراشی افقی بسازید. در پایان این دوره، شما قادر خواهید بود با استفاده از فلکس باکس، طرح‌بندی‌های واکنش‌گرای وب‌سایت را در دنیای واقعی ایجاد کنید. همه فایل‌های کد و فایل‌های پشتیبانی در https://github.com/PacktPublishing/The-Complete-CSS-Flexbox-Guide-With-a-Complete-Project-2021 در دسترس هستند. با ویژگی‌های مختلف flexbox آشنا شوید. عناصر وب سایت را با ویژگی justify-content و align-item تراز کنید با استفاده از flexbox به راحتی مقالات پستی با ارتفاع مساوی بسازید با flexbox منوهای ساده و پیشرفته بسازید از flexbox برای ساخت و استایل هدرهای وب سایت استفاده کنید از طرح‌بندی سنگ‌تراشی برای ساخت گالری‌های عکس استفاده کنید اگر یک توسعه‌دهنده وب یا یک طراح یا توسعه‌دهنده فرانت‌اند هستید و به دنبال یادگیری flexbox برای ساخت طرح‌بندی‌های پیشرفته وب‌سایت واکنش‌گرا هستید، این دوره برای شما مناسب است. برای شروع این دوره به درک اولیه HTML و CSS نیاز است. درک کاملی از flexbox و ویژگی‌های آن به دست آورید * نحوه استفاده از flexbox را برای متمرکز کردن عناصر به صورت عمودی بیاموزید * برای ایجاد گالری‌های عکس چشمگیر با استفاده از flexbox آماده شوید.

سرفصل ها و درس ها

مبانی برگه های سبک آبشاری (CSS) Flexbox Basics of Cascading Style Sheets (CSS) Flexbox

  • معرفی و بررسی اجمالی دوره Course Introduction and Overview

  • معرفی و بررسی اجمالی دوره Course Introduction and Overview

  • ایجاد اولین کانتینر Flexbox شما Creating Your First Flexbox Container

  • ایجاد اولین کانتینر Flexbox شما Creating Your First Flexbox Container

  • محورهای اصلی و متقاطع Main and Cross Axes

  • محورهای اصلی و متقاطع Main and Cross Axes

  • ویژگی فلکس جریان Flex-flow Property

  • ویژگی فلکس جریان Flex-flow Property

  • آشنایی با ویژگی Flex-wrap Understanding the Flex-wrap Property

  • آشنایی با ویژگی Flex-wrap Understanding the Flex-wrap Property

کنترل ترازبندی عناصر با استفاده از برگه های سبک آبشاری (CSS) Flexbox Controlling the Alignment of Elements Using Cascading Style Sheets (CSS) Flexbox

کنترل ترازبندی عناصر با استفاده از برگه های سبک آبشاری (CSS) Flexbox Controlling the Alignment of Elements Using Cascading Style Sheets (CSS) Flexbox

  • تراز کردن عناصر با ویژگی Justify-content Aligning Elements with the Justify-content Property

  • تراز کردن عناصر با ویژگی Justify-content Aligning Elements with the Justify-content Property

  • اطلاعات بیشتر در مورد ویژگی Justify-content More about the Justify-content Property

  • اطلاعات بیشتر در مورد ویژگی Justify-content More about the Justify-content Property

  • تراز کردن عناصر با ویژگی Align-items Aligning Elements with the Align-items Property

  • تراز کردن عناصر با ویژگی Align-items Aligning Elements with the Align-items Property

  • تراز کردن یک عنصر با ویژگی Align-self Aligning a Single Element with the Align-self Property

  • تراز کردن یک عنصر با ویژگی Align-self Aligning a Single Element with the Align-self Property

  • تراز کردن چندین خط با ویژگی Align-content Aligning Multiple Lines with the Align-content Property

  • تراز کردن چندین خط با ویژگی Align-content Aligning Multiple Lines with the Align-content Property

  • درک ویژگی سفارش Understanding the Order Property

  • درک ویژگی سفارش Understanding the Order Property

کنترل اندازه عناصر با استفاده از برگه های سبک آبشاری (CSS) Flexbox Controlling the Sizing of Elements Using Cascading Style Sheets (CSS) Flexbox

کنترل اندازه عناصر با استفاده از برگه های سبک آبشاری (CSS) Flexbox Controlling the Sizing of Elements Using Cascading Style Sheets (CSS) Flexbox

  • ویژگی Flex-grow در برگه‌های سبک آبشاری (CSS) Flex-grow Property in Cascading Style Sheets (CSS)

  • ویژگی Flex-grow در برگه‌های سبک آبشاری (CSS) Flex-grow Property in Cascading Style Sheets (CSS)

  • ویژگی Flex-Shrink در برگه‌های سبک آبشاری (CSS) Flex-shrink Property in Cascading Style Sheets (CSS)

  • ویژگی Flex-Shrink در برگه‌های سبک آبشاری (CSS) Flex-shrink Property in Cascading Style Sheets (CSS)

  • ویژگی های مبتنی بر انعطاف پذیری در برگه های سبک آبشاری (CSS) Flex-basis Property in Cascading Style Sheets (CSS)

  • ویژگی های مبتنی بر انعطاف پذیری در برگه های سبک آبشاری (CSS) Flex-basis Property in Cascading Style Sheets (CSS)

استفاده از برگه های سبک آبشاری (CSS) Flexbox برای ساخت دو منو Using Cascading Style Sheets (CSS) Flexbox to Build Two Menus

استفاده از برگه های سبک آبشاری (CSS) Flexbox برای ساخت دو منو Using Cascading Style Sheets (CSS) Flexbox to Build Two Menus

  • بخش نمای کلی و شروع فایل ها Section Overview and Starting Files

  • بخش نمای کلی و شروع فایل ها Section Overview and Starting Files

  • ساخت یک منوی ساده با برگه های سبک آبشاری (CSS) Flexbox Building a Simple Menu with Cascading Style Sheets (CSS) Flexbox

  • ساخت یک منوی ساده با برگه های سبک آبشاری (CSS) Flexbox Building a Simple Menu with Cascading Style Sheets (CSS) Flexbox

  • ساخت یک منوی پیشرفته با Flexbox آبشاری Style Sheets (CSS). Building an Advanced Menu with Cascading Style Sheets (CSS) Flexbox

  • ساخت یک منوی پیشرفته با Flexbox آبشاری Style Sheets (CSS). Building an Advanced Menu with Cascading Style Sheets (CSS) Flexbox

پروژه مبتنی بر Flexbox Flexbox-based Project

پروژه مبتنی بر Flexbox Flexbox-based Project

  • مروری بر پروژه نهایی شما Overview of Your Final Project

  • مروری بر پروژه نهایی شما Overview of Your Final Project

  • ساخت طرح جام مقدس Building the Holy Grail Layout

  • ساخت طرح جام مقدس Building the Holy Grail Layout

  • ساخت هدر با استفاده از برگه های سبک آبشاری (CSS) Flexbox Building a Header Using Cascading Style Sheets (CSS) Flexbox

  • ساخت هدر با استفاده از برگه های سبک آبشاری (CSS) Flexbox Building a Header Using Cascading Style Sheets (CSS) Flexbox

  • ساخت و طراحی بخش پست ها Building and Styling the Posts Section

  • ساخت و طراحی بخش پست ها Building and Styling the Posts Section

  • افزودن برگه های سبک آبشاری (CSS) Flexbox به پست ها Adding Cascading Style Sheets (CSS) Flexbox to Posts

  • افزودن برگه های سبک آبشاری (CSS) Flexbox به پست ها Adding Cascading Style Sheets (CSS) Flexbox to Posts

  • ساخت و طراحی بخش ساعت Building and Styling the Watch Section

  • ساخت و طراحی بخش ساعت Building and Styling the Watch Section

  • افزودن Flexbox آبشاری Style Sheets (CSS) به بخش Watch Adding Cascading Style Sheets (CSS) Flexbox to the Watch Section

  • افزودن Flexbox آبشاری Style Sheets (CSS) به بخش Watch Adding Cascading Style Sheets (CSS) Flexbox to the Watch Section

  • ساخت و طراحی بخش دانلود Building and Styling the Download Section

  • ساخت و طراحی بخش دانلود Building and Styling the Download Section

  • افزودن برگه های سبک آبشاری (CSS) Flexbox به بخش دانلود Adding Cascading Style Sheets (CSS) Flexbox to the Download Section

  • افزودن برگه های سبک آبشاری (CSS) Flexbox به بخش دانلود Adding Cascading Style Sheets (CSS) Flexbox to the Download Section

  • ساخت یک گالری با چیدمان بنایی افقی با استفاده از برگه های سبک آبشاری (CSS) Flexbox Building a Gallery with the Horizontal Masonry Layout Using Cascading Style Sheets (CSS) Flexbox

  • ساخت یک گالری با چیدمان بنایی افقی با استفاده از برگه های سبک آبشاری (CSS) Flexbox Building a Gallery with the Horizontal Masonry Layout Using Cascading Style Sheets (CSS) Flexbox

  • افزودن پلاگین گالری لایت باکس به بخش گالری Adding the Gallery Lightbox Plugin to the Gallery Section

  • افزودن پلاگین گالری لایت باکس به بخش گالری Adding the Gallery Lightbox Plugin to the Gallery Section

  • ساختن نوار کناری با استفاده از برگه های سبک آبشاری (CSS) Flexbox Building a Sidebar Using Cascading Style Sheets (CSS) Flexbox

  • ساختن نوار کناری با استفاده از برگه های سبک آبشاری (CSS) Flexbox Building a Sidebar Using Cascading Style Sheets (CSS) Flexbox

  • منوها و پاورقی های ساختمان Building Menus and Footers

  • منوها و پاورقی های ساختمان Building Menus and Footers

نمایش نظرات

آموزش راهنمای کامل CSS Flexbox با یک پروژه کامل [به روز رسانی برای سال 2021] [ویدئو]
جزییات دوره
2 h 24 m
30
Packtpub Packtpub
(آخرین آپدیت)
از 5
ندارد
دارد
دارد
Ahmed Sadek
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Ahmed Sadek Ahmed Sadek

توسعه دهنده وب فول استک، فریلنسر و تی

سلام، احمد است، خوشحالم که به اینجا رسیدی!

من یک توسعه دهنده ارشد وب هستم که در 7 سال گذشته به عنوان فریلنسر کار می کنم، صدها پروژه وب را توسعه داده ام و ده ها مشتری خوشحال دارم!

من به شرکت‌هایی در هر اندازه کمک کرده‌ام تا تجارت خود را بهبود بخشند.

من نمی‌توانم صبر کنم تا تمام دانش توسعه وب را که در اینجا با دانش‌آموزان در اشتراک مهارت دارم به اشتراک بگذارم، بنابراین اگر به یادگیری فن‌آوری‌های توسعه وب مدرن علاقه دارید، در دوره‌های من یکدیگر را خواهیم دید!